<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml"> <!-- 这里需要引入vml -->
    <head>
        <title>VML (Vector Markup Language) Demo</title>
        
        <!-- Before IE9: No HTML5 or CSS3 Support -->
        <!-- IE=9:  HTML5, CSS3, Not support CSS3 Animation, Support <HTA> tag, Support VBScript -->
        <!-- IE=10: HTML5, CSS3, Not support <HTA> tag, Support VBScript -->
        <!-- IE=11: HTML5, CSS3, Not support <HTA> tag, not support VBScript -->
        <!-- If you gotta enable HTML5, Just Un-comment the following line of code: -->
        <!-- <meta http-equiv="x-ua-compatible" content="IE=9" charset="utf-8"/> -->
        <meta charset="utf-8"/>

        <!-- Just a script that helps you know whether the VBScript is supported -->
        <!-- <script type="text/vbscript"> -->
            <!-- MsgBox "The VBScript is supported.", 65, "VBScript Support Test" -->
        <!-- </script> -->

        <!-- The <script> tag should be placed before the <HTA> tag -->
        <!-- In order to do window resize before the window created -->
        <!-- You have to notice that once the browser parse through the <HTA> tag  -->
        <!-- The window should be created -->
        <script>
            var windowWidthRatio = 0.97;
            var windowHeightRatio = 0.8;

            function CloseTheWindow(){
                window.close();
            }

            function CalculateWindowPosition(windowWidth, windowHeight){
                var xPos = (screen.width - windowWidth) / 2;
                var yPos = (screen.height - windowHeight) / 2;
                return [xPos, yPos];
            }

            function BeforeWindowOnload_Setup(){
                window.windowWidth = window.windowWidthRatio * screen.width;
                window.windowHeight = window.windowHeightRatio * screen.height;
            }

            function BeforeWindowOnload_Loop(){
                window.resizeTo(window.windowWidth, window.windowHeight);
                var position = CalculateWindowPosition(window.windowWidth, window.windowHeight);
                window.windowLeft = position[0];
                window.windowUp = position[1];
                window.moveTo(window.windowLeft, window.windowUp);
            }

            // The following script will run BEFORE the window loads
            while (true) {
                BeforeWindowOnload_Setup();
                try {
                    BeforeWindowOnload_Loop();
                    break;
                } catch (e) {
                    continue;
                }
            }
        </script>

        <!-- ContextMenu: 右键菜单 -->
        <!-- Border=thin: 禁用鼠标拖动边框缩放窗口大小 -->
        <!-- Icon=".exe": 使用在System32文件夹中的exe图标 -->
        <HTA:Application
            ApplicationName="Message Box"
            ID="MsgBox"
            InnerBorder="no"
            MaximizeButton="no"
            MinimizeButton="no"
            Scroll="no"
            ContextMenu="no"
            Selection="no"
            SingleInstance="yes"
            Border="thin"
            Icon="colorcpl.exe"
        />

        <style type="text/css">
            v\:*{behavior:url(#default#VML);} /* IE7(不包括IE7)之后不适用 */
        </style>
    </head>
    <body id="body">
        <v:line from="200,200" to="600,100" style="position:absolute;z-index:8" id="line"> <!-- 注意CSS样式不可省略 -->
            <v:stroke EndArrow="Classic"/> <!--这里指定终点的样式，Classic就是箭头-->
        </v:line>

        <script>
            var line = document.getElementById("line");
            var x = 200, y = 200;
            setInterval(function(){
                var line = document.getElementById("line");
                line.from = x + "," + y;
                x += 1;
                y += 1;
            }, 1);
        </script>

        <script>
            window.onload = function(){
                var line = document.createElement("<v:line></v:line>");
                var lineEnd = document.createElement("v:Stroke");
                line.from = "0,0";
                line.to = "150,100";
                line.strokecolor = "red";
                line.strokeweight = "6px";
                lineEnd.EndArrow = "Classic";
                line.appendChild(lineEnd);
                document.getElementById("body").appendChild(line);
            }
        </script>
    </body>
</html>
